<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box"></div>
    <div class="container"></div>
    <script>
      // 增 、删、改、查；
      // 查 ：获取各种元素；
      // 一、增加元素：创建元素；
      // 1. 获取元素；
      // var boxEle = document.querySelector(".box");
      // boxEle.innerHTML = `123`;
      // console.log(boxEle);
      //2.  直接创建一个元素对象；
      var ele = document.createElement("div");
      ele.innerHTML = "hello";
      ele.className = "active";
      console.log(ele);

      // // 3.把元素对象添加到指定位置   父级元素.appendChild(“元素对象”);

      var containerEle = document.querySelector(".container");
      document.onclick = function () {
        var p = document.createElement("p");
        p.innerHTML = "我是p标签";
        containerEle.appendChild(ele);
        containerEle.appendChild(p);
      };

      // 二、创建文本对象；createTextNode() :了解
      //元素对象，元素节点，即和标签(div p)相关 
      //文本对象：文本节点 两者是不同类型的对象
      // 创建一个文本对象
      var text = document.createTextNode("1111");
      console.log(text);
      // 创建一个div元素
      var div = document.createElement("div");
      div.innerHTML = "1111"; //多数情况下都会用innerHTML或者是innerText来替代
      div.appendChild(text);//appendchild是函数执行语法 里面写要添加的对象名，因此不用写" " 
      console.log(div);
      document.body.appendChild(div);


      // 三 、innerHTML 和 appendChild的区别
      var containerEle = document.querySelector(".container");

      // containerEle.innerHTML = `<div>1111</div>`;

      var div = document.createElement("div");
      div.innerHTML = "1111";
      // containerEle.appendChild(div);

      // 1.innerHTML赋值操作 ，后面内容是字符串或者是数字；
      //  2.appendChild是函数执行的写法 ，appendChild添加的内容是对象类型

      // 通过createElement 创建一个table表格；
    </script>
  </body>
</html>
